<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业</title>
		<script src="vue@3.2.23.js"></script>
		<style>
			.box{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="box">
				<button @click="to=true">修改</button>
				<button @click="msg=''">删除</button>
			</div>
			<div v-text="msg"></div>
			<at v-if="to" 
					:to="to" 
					v-model:to="to"
					:msg="msg"
					v-model:msg="msg"
					></at>
		</div>
	</body>
</html>
<script>
	const at={
		props:['to','msg'],
		data(){
			return {
				myMsg:this.msg
			}
		},
		methods:{
			close() {
				this.$emit('update:to',false)
				alert("取消修改")
			},
			up(){
				this.$emit('update:msg',this.myMsg)
				alert("修改成功")
				this.$emit('update:to',false)
			}
		},
		template:`
			<div>
				<div>
					<div>
						<textarea v-model="myMsg"></textarea>
					</div>
					<button @click="up()">修改</button>
					<button @click="close()">取消</button>
				</div>
			</div>
		`
	}
	const app=Vue.createApp({
		components:{
			at
		},
		data(){
			return {
				to:false,
				msg:`
					噫吁嚱，危乎高哉！
				`
			}
		},
	})
	const vm=app.mount('#app')
</script>